<template>
   <div class="center">
      <div class="center-form">
          <el-form inline  @submit.native.prevent label-width="120px">
            <el-form-item label="订单编号">
              <el-input v-model="getData.orderNo" clearable placeholder="请输入订单编号" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="getData.merchantName" clearable placeholder="请输入商品名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select v-model="getData.orderStatus" clearable placeholder="请选择">
                  <el-option
                    v-for="item in orderStatusList"
                    :key="item.value"
                    :label="item.lable"
                    :value="item.value">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="分帐状态">
              <el-select v-model="getData.orderSettleStatus" clearable placeholder="请选择">
                  <el-option
                    v-for="item in accountsStatusList"
                    :key="item.value"
                    :label="item.lable"
                    :value="item.value">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="getData.merchantPName" clearable placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="下单时间">
                <el-date-picker
                  @change="timeChange"
                  v-model="getData.orderDate"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="实际扣款时间">
                <el-date-picker
                  @change="actualDeduetionTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="getData.actualDeductionTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="statistical" v-if="orderDetail">
        <div class="statisticalitem">
          <div>订单笔数</div>
          <div>
            <span class="red">{{ orderDetail.total}}</span> 笔
          </div>
        </div>
        <div class="statisticalitem">
          <div>订单总额</div>
          <div>
            <span class="red">{{ orderDetail.amount }}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>退款笔数（包含部分退款）</div>
          <div>
            <span class="red">{{ orderDetail.refundTotal }}</span> 笔
          </div>
        </div>
        <div class="statisticalitem">
          <div>退款总额</div>
          <div>
            <span class="red">{{ orderDetail.refundAmount }}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>已分账总额（包含分账退款）</div>
          <div>
            <span class="red">{{ orderDetail.successSettleAmount }}</span> 元
          </div>
        </div>
        <div class="statisticalitem">
          <div>未分帐金额</div>
          <div>
            <span class="red">{{ orderDetail.waitSettleAmount }}</span> 元
          </div>
        </div>
      </div>
      <div class="center-table">
            <el-table
          :data="tabelList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
        <el-table-column
            prop="orderNo"
            label="订单编号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="productNo"
            label="产品编号"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="merchantName"
            width="180"
            label="商户名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="deductionAmount"
            label="扣款金额"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="orderStatus"
            label="订单状态"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
                <p> {{funorderStatus(scope.row.orderStatus)}} </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderDate"
            label="下单时间"
            width="180"
            align="center"
          >
        </el-table-column>
          <el-table-column
            prop="actualDeductionTime"
            label="实际扣款时间"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orderSettleStatus"
            label="分账状态"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
                <p> {{funOrderSettleStatus(scope.row.orderSettleStatus)}} </p>
            </template>
         </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="140"
          >
          <!--   -->
            <template slot-scope="scope">
                <el-button
                v-if="scope.row.orderSettleStatus == 'SETTLE_SUCCESS'"
                type="text"
                @click="accountsCheck(scope.row)"
                >分账明细</el-button>
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="getData.size"
          :current-page.sync="getData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
         </div>
       </div>
       <el-dialog
         title="分账明细"
         :visible.sync="accountsVisible"
         width="800px"
         >
         <div>
            <el-table
             :data="accountsTabelList"
             tooltip-effect="dark"
             style="width: 100%"
             stripe
             :header-cell-style="tableHeaderColor">
             <el-table-column
            prop="transIn"
            label="分账账号"
            width="160"
            align="center"
            />
            <el-table-column
            prop="rate"
            label="分账比例"
            align="center"
            />
          
            <el-table-column
            prop="amount"
            label="分账金额"
            align="center"
            />
            <el-table-column
            prop="status"
            label="分账状态"
            align="center"
            >
            <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <p>{{ funOrderSettleStatus(scope.row.status) }}</p>
              <el-popover
                placement="top-start"
                title="分账失败原因"
                width="200"
                trigger="hover"
                :content="scope.row.failReason">
                <i slot="reference" style="margin:-5px 0 0 5px ;" class="el-icon-question" v-if="scope.row.status == 'FAIL'"></i>
              </el-popover>
            </div>
            </template>
            </el-table-column>
            <el-table-column
            prop="settleTime"
            label="分账时间"
            width="160"
            align="center"
            />
            </el-table>
         </div>
       </el-dialog>
    </div>
</template>

<script>
import { orderList , getOrderDetail } from '@/api/fetchApi'
export default{
    data(){
        return{
            getData:{
                size:10,
                page:1
            },
            tabelList:[],
            loading:false,
            indentinfo:{},
            orderStatusList:[{lable:'下单中',value:'ORDERING'},{lable:'下单失败',value:'ORDER_FAILED'},{lable:'已下单',value:'ORDERED'},{lable:'支付中',value:'PAYING'},{lable:'已支付',value:'PAID'},{lable:'支付失败',value:'PAY_FAILED'},{lable:'已取消',value:'CANCEL'},{lable:'已退款',value:'REFUNDED'},{lable:'已暂停',value:'PAUSED'}],
            accountsStatusList:[{lable:'待分账',value:'WAIT_SETTLE'},{lable:'分账中',value:'SETTLING'},{lable:'分账成功',value:'SETTLE_SUCCESS'},{lable:'分账失败',value:'SETTLE_FAIL'}],
            total:0,
            accountsTabelList:[],
            accountsVisible:false,
            orderDetail:''
        }
    },
    mounted(){
        this.initList()
    },
    methods:{
        async initList(){
           const res = await orderList(this.getData)
           this.tabelList = res.data
           this.total = res.pageInfo.recordCount
           this.initGetOrderDetail()
        },
        async initGetOrderDetail(){
          const res = await getOrderDetail(this.getData)
          this.orderDetail = res.data
        },
        timeChange(v){
            this.getData.startTime = v[0] || ''
            this.getData.finishTime = v[1] || ''
        },
        actualTimeChange(v){
            if(v.length){
                this.getData.actualStartTime = v[0] || ''
                this.getData.actualFinishTime = v[1] || ''
            }
        },
        accountsCheck(v){
            this.accountsVisible = true
            this.accountsTabelList = JSON.parse(v.settleDetails) 
        },
        funOrderSettleStatus(v){
            const data = this.accountsStatusList.find(item=>item.value == v)
            return data.lable
        },
        funorderStatus(v){
            const data = this.orderStatusList.find(item=>item.value == v)
            return data.lable
        },
        resetList(){
            this.getData = {
                size:10,
                page:1
            }
            this.initList()
        },
        handleCurrentChange(val) {
          this.getData.page = val;
          this.initList()
        },
        sizechange(val) {
          this.getData.size = val;
          this.initList()
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>


<style scoped>
.center{
    width: calc(100% - 40px);
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    padding:30px 20px 0 20px;
}
.center-form{
  padding: 0 22px;
}

.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}

.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}

.avatar{
    width:160px;
    height:160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}

::v-deep  .el-upload{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.termination-tips{
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
}
.el-icon-delete{
  margin-left: 10px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.statistical > .statisticalitem {
  text-align: center;
  line-height: 200%;
}
.red {
  color: #f9607d;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    /* padding: 0 20px; */
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>